<template>
  <div id="head">
    <input
      type="text"
      placeholder="请输入你的任务名称,按回车键确认"
      @keyup.enter="addItemForTodoList"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "HeadView",
  props: ["addItem"],
  methods: {
    addItemForTodoList(e) {
      if (e.target.value === "") {
        alert("请输入事件名称");
        return;
      }
      const id = nanoid();
      const value2 = { id: id, content: e.target.value.trim(), done: false };
      this.addItem(value2);
      e.target.value = "";
    },
  },
};
</script>

<style lang="less" scoped>
#head input {
  width: 100%;
  height: 34px;
  box-sizing: border-box;
}
</style>